
import React from "react"

// 函数组件中的事件绑定

// 语法: on + 首字母大写的事件名称  onClick={ 事件的回调函数 }

// 如何获取事件对象e？
// 直接在事件回调函数中补充一个形参e 就可以获取到

// 如何获取额外的参数？
// onClick={ onDel } -> onClick={ () => onDel(id) }
// 注意: 一定不要在模板中写出函数调用的代码 onClick = { onDel(id) }  bad!!!!!!

const TestComponent = () => {
  const list = [
    {
      id: 1001,
      name: 'react'
    },
    {
      id: 1002,
      name: 'vue'
    }
  ]
  const onClick = (e) => {
    console.log('点击事件触发了', e)
  }

  const onDel = (e, id) => {
    console.log(e, id)
  }
  return (
    <>
      <div>this is test <button onClick={onClick}>click me</button></div>
      <ul>
        {list.map(item => <li key={item.id}>{item.name}
          <button onClick={(e) => onDel(e, item.id)}>x</button></li>)}
      </ul>
    </>
  )
}

function App () {
  return (
    <div>
      <TestComponent />
    </div>
  )
}


export default App
